import { LitElement, html } from "lit";

class ComputedProps extends LitElement {
    static get properties() {
        return {
            itemsA: { type: Array },
            itemsB: { type: Array },
            amountA: { type: Number },
            amountB: { type: Number }
        };
    }

    constructor() {
        super();

        this.itemsA = ["hello", "world"];
        this.itemsB = ["foo", "bar"];
        this.amountA = 1;
        this.amountB = 2;
    }

    //如果你正在公开一个基于两个属性计算的公共属性，你可以
    //只是创建一个结合了这两者的getter。
    get totalAmount() {
        return this.amountA + this.amountB;
    }

    render() {
    //使用聚合物模板，我们必须为属性设置特殊的绑定
    //组合来创建新的值，这样模板系统就能接收这些变化。
    //使用LitElement，我们可以计算渲染内部的组合属性回调。
    //记住，这都是纯javascript，所以你可以使用任何适合你的方法。
    const items = this._computeItems(this.itemsA, this.itemsB);
    return html`
      <div>The computed messages are: [${items.join(", ")}]</div>
      <!-- For simple computed properties, you can just compute them inline -->
      <div>The computed amount is: [${this.amountA + this.amountB}]</div>
    `;
    }

    _computeItems(a, b) {
        return [...a, ...b];
    }
}

customElements.define("computed-properties", ComputedProps);
